Property Panel

In the Corvina dashboard editor a widget can be configured using the Property Panel. We can choose to expose our widget properties defined inside the widget logic in Property Panel.

To expose properties in Property Panel we need to define a class that extends BasePropsHandler. Let see the example of the widget MyWidget in src/examples/MyWidget/MyWidgetPropsHandler.ts.

We want to expose the property message and linkableProp defined here:

export default class MyWidget extends BaseGraphicWgt {
  // message is simple widget property
  message: string;
  // linkableProp can be linked to other widgets
  linkableProp: Value<string>;

First we need to define the property handlers in MyWidgetPropsHandler.ts.

export default class MyWidgetPropsHandler extends BasePropsHandler {
  message: IPropertyHandler;
  linkableProp: IPropertyHandler;

A property handler is a user interface component that permits to

• edit the property value
• link the property to data or other widget properties

Inside the function createCustomPropsHandler() we defiend for every property which component to use:

import { IPropertyHandler, BasePropsHandler } from "corvina";
export default class MyWidgetPropsHandler extends BasePropsHandler {
  message: IPropertyHandler;
  linkableProp: IPropertyHandler;

  createCustomPropsHandler() {

    this.message = {
      layer: "attributes",
      type: "string",
      propControl: "InputPropControl",
      readOnly: false,
      attachTag: false, // This is a simple property
      display: "Message",
      description: "a nice message"
    };

    this.linkableProp = {
      layer: "attributes",
      type: "string",
      propControl: "InputPropControl",
      readOnly: false,
      attachTag: true, // This property is linkable (accepts datalinks).
      display: "Message",
      description: "a nice message"
    };
  }
}

tip

By setting the property attachTag to true you permit to link the property to data or other widget properties via a datalink.

The most used configuration options are:

• layer: group properties in layer, eg: Style, Attributes, ...
• type: type of property, eg: numeric, boolean ([full list])(#property-handler-types)
• propControl: name of Vue component to manage the input, eg: "InputPropControl"
• readOnly: if true the property is visible in Property Panel but not editable
• attachTag: if true the property is linkable, so you can link it to data or other widget properties
• display: label show in Property Panel
• description: text show in the tooltip

Full list of property handler options

interface IPropertyHandler {
  /** Container layer in the property panel. Commonly used layers are "attributes" (the first one by default), "Style"  */
  layer?: string,
  /** Used to relatively sort the properties (and respective layers). The 'attributes" layers is forced as first layer */
  priority?: number;
  /** The type of the property passed to the propcontrol */
  type: IPropHandlerType,
  /** Format for type (for example # for numeric) */
  format?: string,
  /** Key values used for select type */
  options?: IPropHandlerSelectOption[],
  /** Properties to pass to the prop control (e.g. visible, maxLength, ...) */
  /** The name of the graphical component used to handle this property */
  propControlOptions?: PropControlOptions,
  propControl?: string,
  readOnly?: boolean,
  /** Allow to attach tag. The propControl in this case will be replaced by a DatalinkPropControl or FormualPropControl when datalink is actually attached to the property */
  attachTag?: boolean,
  /** Text to show in the properties panel */
  display?: string,
  /** Tooltip */
  description?: string,
  /** If set to true will look for all properties matching the property name + _options */
  dynamicOptions?: boolean,
  /** The property is actually an alias for a subproperty, where the subproperty is listed as alias */
  alias?: string[],
  /** Property "prop" must match value to hide this control */
  hideConditions?: { [prop: string]: any },
  /** Property "prop" must match value to show this control */
  showConditions?: { [prop: string]: any },
  showContext?: ShowPropContext,
  /** The property is exposed in the project tree */
  exposed?: boolean,
}

Property Handler Types

type IPropHandlerType = "string" 
  | "numeric" 
  | "boolean" 
  | "object" 
  | "model" 
  | "color" 
  | "date" 
  | "datetime" 
  | "select"  
  | "array" 
  | "select-icon" 
  | "string-textarea" 
  | "datasource"
  | "async-model" /* the model is fetched asynchronously */;